<template>
  <div class="app-container">
    <indexMap
      :open="open"
      :queryOpen="queryOpen"
      @showHideUploadDiv="showHideUploadDiv"
      @showHideQueryDiv="showHideQueryDiv"
      @getMap="getMap"
    />
    <!--查询面板-->
      <div v-if="showHideQueryDivBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form :model="queryParams" label-position="right" label-width="82px">
            <el-form-item label="选择版本">
              <el-input v-model="queryParams.versionCode" placeholder="请选择版本" :suffix-icon="MoreFilled" readonly
                @click="selectVersionCode" clearable />
            </el-form-item>
            <el-form-item label="省" prop="province">
              <el-input v-model="queryParams.province" placeholder="" readonly />
            </el-form-item>
            <el-form-item label="市" prop="city">
              <el-input v-model="queryParams.city" placeholder="" readonly />
            </el-form-item>
            <el-form-item label="区/县" prop="county">
            <el-input v-model="queryParams.county" placeholder="" readonly />
            </el-form-item>
            <el-form-item label="数据类型">
              <el-select v-model="queryParams.dataType" placeholder="请选择" clearable value-key="name">
                <el-option v-for="item in dataTypeInfoArray" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="new-queryBtnDiv">
            <el-button @click="queryClick" type="primary">查询图层</el-button>
          </div>
          <div class="new-queryTableBtnDiv">
            <el-button @click="queryTableClick" type="primary">查询列表</el-button>
          </div>
          <div class="new-closeBtnDiv">
            <el-button @click="closeSelect">关闭</el-button>
          </div>
        </div>
      </div>
    <!-- 添加 -->
    <el-dialog v-model="open" width="800px" title="添加数据" append-to-body destroy-on-close :show-close="false"
      :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <p class="mt15"></p>
        <el-form-item label="版本操作" prop="banben" required>
          <el-radio-group v-model="form.banben" @change="changeBanben">
            <el-radio label="保存新版本">保存新版本</el-radio>
            <!-- <template v-if="versionCodeList.length != 0">
              <el-radio label="覆盖旧版本">覆盖旧版本</el-radio>
            </template> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据级别" prop="dataRangeCountry">
          <el-row>
            <el-col :span="8">
              <el-select v-model="form.dataRangeCountry" placeholder="请选择" style="width:192px" @change="chooseFormScope"
                clearable :disabled="disabled1">
                <el-option v-for="item in [{ value: 1, label: '国家级' }, { value: 2, label: '省级' }]" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="版本范围" prop="dataRange">
          <el-row :gutter="32">
            <el-col :span="8">
              <el-form-item prop="dataRangeProvince" label-width="0px">
                <el-select v-model="queryParams1.dataRangeProvince" placeholder="省" style="width:100%"
                  @change="chooseProvince" clearable
                  :disabled="form.dataRangeCountry == null || form.dataRangeCountry == '' || disabled1">
                  <el-option key="全国" label="全国" value="全国" v-if="form.dataRangeCountry == '1'"></el-option>
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px">
                <el-select v-model="queryParams1.dataRangeCity" placeholder="市" style="width:100%"
                  @change="chooseCity" clearable
                  :disabled="queryParams1.dataRangeProvince == '全国' || form.dataRangeCountry == null || form.dataRangeCountry == ''">
                  <el-option key="全部" label="全部" value="全部" v-if="cityFormData && cityFormData.length > 0"></el-option>
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="0px">
                <el-select v-model="queryParams1.dataRangeArea" placeholder="区县" style="width:100%"
                  @change="chooseCounty" clearable
                  :disabled="queryParams1.dataRangeProvince == '全国' || queryParams1.dataRangeCity == '全部' || form.dataRangeCountry == null || form.dataRangeCountry == ''">
                  <el-option key="全部" label="全部" value="全部" v-if="areaFormData && areaFormData.length > 0"></el-option>
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="数据名称" prop="dataName">
          <el-input v-model="form.dataName" placeholder="请输入数据名称" clearable />
        </el-form-item>
        <el-form-item label="数据说明" prop="dataDesc">
          <el-input v-model="form.dataDesc" type="textarea" maxlength="300" show-word-limit
            :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入数据说明" />
        </el-form-item>
        <template v-if="form.banben != '保存新版本'">
          <el-form-item label="版本号" prop="versionCode">
            <el-select v-model="form.versionCode" placeholder="请选择版本号" style="width:100%" clearable>
              <el-option v-for="(item, index) in versionCodeList" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="版本号">
            <span>保存后自动生成</span>
          </el-form-item>
        </template>
        <el-form-item label="版本日期" prop="versionTime">
          <el-date-picker v-model="form.versionTime" type="date" placeholder="请选择版本日期" value-format="YYYY-MM-DD"
            :disabled-date="disabledDate" clearable style="width:100%" />
        </el-form-item>
        <el-form-item label="版本说明" prop="versionDesc">
          <el-input v-model="form.versionDesc" type="textarea" maxlength="300" show-word-limit
            :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入版本说明" />
        </el-form-item>
        <template v-if="form.banben != '保存新版本'">
          <el-form-item label="更新说明" prop="updateDesc">
            <el-input v-model="form.updateDesc" type="textarea" maxlength="300" show-word-limit
              :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请描述版本更新的数据范围及内容，限制300字" clearable />
          </el-form-item>
        </template>
        <el-form-item label="数据文件" prop="dataFileIds" style="position:relative">
          <fileUploadData ref="dataFileRef" v-model="form.dataFileId" :fileType="fileType" @sureUploadFile="uploadFile"
            @dels="dels" :isSpatialData="isSpatialData" :name="name" :code="code" :isHasFile="isHasFile" />
          <span style="position:absolute;left:100px;top:0px;cursor: pointer;color:#107ce5" @click="handleDoc"
            v-if="isSpatialData == 1">字段说明</span>
        </el-form-item>
        <el-form-item label="上传附件">
          <fileUpload ref="attachmentFileRef" v-model="form.attachmentId" :isShowTip="false" />
        </el-form-item>
        <el-form-item label="上传人">{{ form.user }}</el-form-item>
        <el-form-item label="上传日期">{{ form.uploadTime }}</el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="closeForm">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="选择版本" v-model="openLeader" width="900px" append-to-body @close="closeVersicode">
      <p></p>
      <el-form ref="selectRef" :model="pageSize">
        <el-row style="margin: 20px 0;">
          <el-col :span="8">
            <el-form-item label="数据级别" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeCountry" placeholder="请选择数据类别" clearable /> -->
              <el-select v-model="pageSize.dataRangeCountry" placeholder="请选择数据级别" style="width:192px" @change="chooseFormScope1"
                clearable :disabled="disabled1">
                <el-option v-for="item in [{ value: 1, label: '国家级' }, { value: 2, label: '省级' }]" :key="item.value"
                  :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="省" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeProvince" placeholder="请选择省" clearable /> -->
              <el-select v-model="pageSize.dataRangeProvince" placeholder="请选择省" @change="chooseProvince" clearable
                value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeCity" placeholder="请选择市" clearable /> -->
              <el-select v-model="pageSize.dataRangeCity" placeholder="请选择市" @change="chooseCity" clearable value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区县" label-width="80px">
              <!-- <el-input v-model="pageSize.dataRangeArea" placeholder="请选择区县" clearable /> -->
              <el-select v-model="pageSize.dataRangeArea" placeholder="请选择区县" @change="chooseCounty" clearable value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleQuery1" style="float: right;">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="selectMunchRef" :data="leaderList" stripe @selection-change="handleSelectionChange">
        <el-table-column label="单选" width="55px">
          <template #default="scope">
            <el-radio :label="scope.row.id" v-model="selectRadio"
              @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" width="55">
          <template #default="scope">
            <span>{{ (pageSize.page - 1) * pageSize.rows + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="版本号" align="center" prop="versionCode" />
        <el-table-column label="数据名称" align="center" prop="dataName" />
        <el-table-column label="数据范围" align="center" prop="dataRange" />
        <el-table-column label="上传人" align="center" prop="uploadUser" />
        <el-table-column label="上传时间" align="center" prop="uploadTime" />
      </el-table>
      <pagination v-show="total > 0" :total="pageSize.total" v-model:page="pageSize.page"
        v-model:limit="pageSize.rows" @pagination="handleQuery1" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="querySelect" :disabled="multiple">确
            定</el-button>
          <el-button @click="openLeader = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="openDoc" width="800px" title="数据说明" append-to-body>
      <p class="mt15"></p>
      <el-tabs v-model="tabType" type="card" class="demo-tabs">
        <el-tab-pane v-for="item in docList" :key=item.name :label="item.name" :name="item.name">
          <p>数据类别【{{ item.name }}】应上传符合以下字段的shp文件</p>
          <el-table :data="item.list" stripe>
            <el-table-column label="序号" align="center" type="index" width="80" />
            <el-table-column label="数据名称" align="center" prop="dataName" />
            <el-table-column label="数据类别" align="center" prop="dataType" />
            <el-table-column label="是否必填" align="center" prop="isMust" />
            <el-table-column label="数据说明" align="center" prop="dataDesc" width="200" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="openDoc = false" auto-insert-space>关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!--表格面板-->
      <Table v-if="completeRefreshData == true" :versionCode="queryParams.versionCode" :typeName="typeName"
        :typeCode="selectType" :showTable="detailTable"
        @closeTableDiv="closeDetailResultDiv"></Table>
    <!--数据图层组件-->
      <MapLayers :map="map" :dataTypeInfoArray="dataTypeInfoArray" :layerInfoParams="layerInfoParams"
        @setSelectId="setSelectId">
      </MapLayers>
  </div>
</template>

<script setup name="kilometerGrid">
import indexMap from '@/map/disasterManage/kilometerGrid/indexMap.vue'
import fileUpload from './fileUpload.vue'
import { getProvince, getChildArea } from "@/api/system/division";
import { uploadAdministrativeArea,page,getDataDoc } from '@/api/disasterManage/kilometerGrid/index.js'
import { iServerHttp } from "@/map/projMap.js";
import { getUserId } from '@/utils/auth'
import fileUploadData from './FileUpload/index'
import { useNow, useDateFormat } from '@vueuse/core'
import { MoreFilled } from '@element-plus/icons-vue'
import MapLayers from '@/map/components/mapLayers/index.vue';
//表格面板
import Table from './table.vue';
import { ref } from 'vue';
import { debug } from 'util';

const { proxy } = getCurrentInstance();
const dataRangeProvinceCheck = (rule, value, callback) => {
  if (queryParams1.value.dataRangeProvince == '全国' && (!queryParams1.value.dataRangeCity || queryParams1.value.dataRangeCity == '') && (!queryParams1.value.dataRangeArea || queryParams1.value.dataRangeArea == '')) {
    callback()
  } else if (queryParams1.value.dataRangeProvince) {
    callback()
  } else if (queryParams1.value.dataRangeProvince && queryParams1.value.dataRangeCity == '全部' && (!queryParams1.value.dataRangeArea || queryParams1.value.dataRangeArea == '')) {
    callback()
  } else if (queryParams1.value.dataRangeProvince && queryParams1.value.dataRangeCity && queryParams1.value.dataRangeCity == "全部") {
    callback()
  } else {
    callback(new Error('请选择版本范围'))
  }
}
const data = reactive({
  queryParams: {
    versionCode: '',
    tempVersionCode: '',
    dataName: '',
    dataType: '',
    dataRangeCountry: '',
    dataRangeProvince: '',
    dataRangeCity: '',
    dataRangeArea: '',
    versionStartTime: '',
    versionEndTime: '',
    uploadStartTime: '',
    uploadEndTime: '',
  },
  form: {
    banben: '保存新版本',
    dataScope: '1',
    type: '1',
    dataFileId: [],
    versionCode: ''
  },
  queryParams1: {
    dataRangeProvince: '',
    dataRangeCity: '',
    dataRangeArea: '',
  },
  rules: {
    dataRangeCountry: [{ required: true, message: "数据级别不能为空", trigger: "change" }],
    dataRange: [{ required: true,message: "版本范围不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
    // dataRangeProvince: [{ message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
    dataType: [{ required: true, message: "数据类别不能为空", trigger: "change" }],
    dataName: [{ required: true, message: "数据名称不能为空", trigger: "blur" }],
    dataDesc: [{ required: true, message: "数据说明不能为空", trigger: "blur" }],
    versionCode: [{ required: true, message: "版本号不能为空", trigger: "change" }],
    versionTime: [{ required: true, message: "版本日期不能为空", trigger: "change" }],
    versionDesc: [{ required: true, message: "版本说明不能为空", trigger: "blur" }],
    updateDesc: [{ required: true, message: "更新说明不能为空", trigger: "blur" }],
    dataFileIds: [{ required: true, message: "数据文件不能为空", trigger: "blur" }],
    dataFrom: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    uploadSource: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    spatialDataType: [{ required: true, message: "空间数据类型不能为空", trigger: "blur" }],
    projectionInfo: [{ required: true, message: "投影信息不能为空", trigger: "blur" }],
    fieldNum: [{ required: true, message: "字段个数不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
    fieldEntry: [{ required: true, message: "字段条目不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
  },
  pageSize: {
    dataRangeCountry: '', //数据级别 1-国家级， 2-省级
		dataRangeProvince: '', //版本范围省id
		dataRangeCity: '', //版本范围市id
		dataRangeArea: '', //版本范围县区id
    page: 1,
    rows: 10,
  },
  layerInfoParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
    code: "",
    name: "",
    sqlText: '',
    show: false
  },
})
const { queryParams,form,rules,queryParams1,pageSize,layerInfoParams } = toRefs(data);
//数据类型
const dataTypeInfoArray = ref([
  { code: "nchzjggw", name: "农村混杂结构房屋格网", table: "fxqh_building_grid_rural_mixed", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_mixed@fxfzxczh", zIndex: 4, fieldId: "id" },
  { code: "ncgjggw", name: "农村钢结构房屋格网", table: "fxqh_building_grid_rural_steel", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_steel@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "nctmsmjggw", name: "农村土木石木结构房屋格网", table: "fxqh_building_grid_rural_civil", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_civil@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "ncmzjggw", name: "农村木竹结构房屋格网", table: "fxqh_building_grid_rural_wood_bamboo", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_wood_bamboo@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "czgjggw", name: "城镇钢结构房屋格网", table: "fxqh_building_grid_urban_steel", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_urban_steel@fxfzxczh", zIndex: 5, fieldId: "id"},
  { code: "ncqtjggw", name: "农村砌体结构房屋格网", table: "fxqh_building_grid_rural_masonry", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_masonry@fxfzxczh", zIndex: 4, fieldId: "id" },
  { code: "ncqtjglxgw", name: "农村其他结构房屋格网", table: "fxqh_building_grid_rural_other", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_other@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "czghjggw", name: "城镇钢混结构房屋格网", table: "fxqh_building_grid_urban_steel_concrete", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_urban_steel_concrete@fxfzxczh", zIndex: 4, fieldId: "id" },
  { code: "czmjggw", name: "城镇木结构房屋格网", table: "fxqh_building_grid_urban_wood", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_urban_wood@fxfzxczh", zIndex: 4, fieldId: "id" },
  { code: "czqtjglxgw", name: "城镇其他结构房屋格网", table: "fxqh_building_grid_urban_other", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_urban_other@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "czqtjggw", name: "城镇砌体结构房屋格网", table: "fxqh_building_grid_urban_masonry", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_urban_masonry@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "ncdbkjkzqqtjggw", name: "农村底部框架结构房屋格网", table: "fxqh_building_grid_rural_bottom_frame", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_bottom_frame@fxfzxczh", zIndex: 5, fieldId: "id" },
  { code: "ncghjggw", name: "农村钢混结构房屋格网", table: "fxqh_building_grid_rural_steel_concrete", url: iServerHttp() + "/iserver/services/map-fxfzxczh/rest/maps/fxqh_building_grid_rural_steel_concrete@fxfzxczh", zIndex: 5, fieldId: "id" },
]);
const open = ref(false)
const showHideQueryDivBool = ref(false)
const queryOpen = ref(false)
const provinceData = ref([])
const cityData = ref([])
const areaData = ref([])
const openLeader = ref(false)
const leaderList = ref([])
const completeRefreshData = ref(false)
const selectId = ref(null);//选中查看详情数据Id
const selectType = ref("");//选中查看详情数据类型
const selectDataList = ref([]);//选中查看详情数据Id的1条数据
const selectListId = ref('')
const detailTable = ref(false);//是否显示表格面板
const total = ref(0)
const isSpatialData = ref(1);
const name = ref(null);
const isHasFile = ref(0);
const fileType = ref([]);
const code = ref(null);

const showHideUploadDiv = (bool) => {//显示|隐藏上传面板
  form.value.uploadTime = useDateFormat(useNow(), 'YYYY-MM-DD')
  form.value.uploadUser = getUserId();
  form.value.user = localStorage.getItem('userName');
  open.value = bool;
  showHideQueryDivBool.value = false;
  // showHideQueryDivBool.value = false;
  // queryFileResult.value = false;
  // if (bool) {
  //   showHideDivType.value = "showUploadDiv";
  // } else {
  //   showHideDivType.value = "";
  // }
  // //清空上传参数
  // clearUploadParams();
}
const showHideQueryDiv = (bool) => {//显示|隐藏查询面板
  queryOpen.value = false
  showHideQueryDivBool.value = bool;
  // if (bool) {
  //   showHideDivType.value = "showQueryDiv";
  // } else {
  //   showHideDivType.value = "";
  // }
  // //清空查询参数
  // clearQueryParams();
}
// 关闭
function closeForm() {
  open.value = false;
}
function closeSelect() {
  showHideQueryDivBool.value = false;
  queryOpen.value = true
}
/** 获取省列表 */
function getProvinceData() {
  getProvince().then((response) => {
    provinceData.value = response.data;
    completeRefreshData.value = true;//显示地图
  });
}
const cityId = ref('');
const countyId = ref('');
const provinceId = ref('');
//选择省
function chooseProvince(value) {
  let id = ''
  cityData.value = [];
  areaData.value = [];
  if (value == "全国") {
    form.value.dataRangeProvince = null;
  }else{
    if (open.value) {//上传面板
      // queryParams1.value.dataRangeProvince = value.name;
      // queryParams1.value.dataRangeCity = "";
      // queryParams1.value.dataRangeArea = "";
      id = value
    }else if (showHideQueryDivBool.value) {//查询面板
      pageSize.value.dataRangeCity = null;
      pageSize.value.dataRangeArea = null;
      pageSize.value.dataRangeProvince = value.name;
      cityId.value = ''
      countyId.value = ''
      provinceId.value = value.id
      id = value.id
    }
    getChildArea(id).then(response => {
      cityData.value = response.data;
    });
  }
}
//选择市
function chooseCity(value) {
  let id = ''
  if (open.value) {//上传面板
    // queryParams1.value.dataRangeCity = "";
    // queryParams1.value.dataRangeCity = value.name;
    // queryParams1.value.dataRangeArea = "";
    id = value
  }else if (showHideQueryDivBool.value) {//查询面板
    pageSize.value.dataRangeCity = value.name;
    pageSize.value.dataRangeArea = null;
    cityId.value = value.id
    countyId.value = ''
    id = value.id
  }
  areaData.value = [];
  getChildArea(id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县
function chooseCounty(value) {
  if (open.value) {//上传面板
    // queryParams1.value.dataRangeArea = value.name;
  }else if (showHideQueryDivBool.value) {//查询面板
    pageSize.value.dataRangeArea = value.name;
    countyId.value = value.id
  }
}
// 根据数据级别重置版本范围
const chooseFormScope = (value) => {
  if (value == "1") {//国家级
    queryParams1.value.dataRangeProvince = "全国";
  } else {
    queryParams1.value.dataRangeProvince = "";
  }
  queryParams1.value.dataRangeCity = "";
  queryParams1.value.dataRangeArea = "";
  form.value.dataRangeProvince = null;
  form.value.dataRangeCity = null;
  form.value.dataRangeArea = null;
  proxy.$refs['ruleForm'].validateField(['dataRangeProvince']);
  cityData.value = [];
  areaData.value = [];
}
const chooseFormScope1 = (value) => {
  if (value == "1") {//国家级
    pageSize.value.dataRangeProvince = "全国";
  } else {
    pageSize.value.dataRangeProvince = "";
  }
  pageSize.value.dataRangeCity = "";
  pageSize.value.dataRangeArea = "";
  form.value.dataRangeProvince = null;
  form.value.dataRangeCity = null;
  form.value.dataRangeArea = null;
  proxy.$refs['selectRef'].validateField(['dataRangeProvince']);
  cityData.value = [];
  areaData.value = [];
}
function handleQuery1() {
  proxy.$modal.loading('等待中...');
  let params = {
    dataRangeCountry: pageSize.value.dataRangeCountry,
		dataRangeProvince: pageSize.value.dataRangeProvince == '全国' ? '' : provinceId.value,
		dataRangeCity: cityId.value,
		dataRangeArea: countyId.value,
    page: pageSize.value.page,
    rows: pageSize.value.rows
  }
  page(params).then(res => {
    leaderList.value = res.data.list
    total.value = res.data.total
    proxy.$modal.closeLoading();
  }).catch(
    proxy.$modal.closeLoading()
  )
}
function selectVersionCode() {
  proxy.$modal.loading('等待中...');
  page({...pageSize.value}).then(res => {
    openLeader.value = true
    leaderList.value = res.data.list
    total.value = res.data.total
    proxy.$modal.closeLoading();
  }).catch(
    proxy.$modal.closeLoading()
  )
}
const selectRadio = ref('')
const selectionData = ref([])
function getCurrentRow(row) {
  if (selectRadio.value) {
    if (selectRadio.value == row.id) {
      selectRadio.value = ''
      selectionData.value = {};// 取消勾选就把回传数据清除
      return
    }
  }
  selectRadio.value = row.id;
  selectionData.value = row;
}
function querySelect() {
  queryParams.value.city = selectionData.value.cityName;
  queryParams.value.county = selectionData.value.countyName;
  queryParams.value.province = selectionData.value.provinceName;
  queryParams.value.versionCode = selectionData.value.versionCode;
  openLeader.value = false;
}
const selectData = ref([])
//文件及图层查询
function queryClick() {
  //查询数据类型
  queryDataType.value = queryParams.value.dataType;
  let dataType = queryDataType.value;
  if (dataType == null) {
    dataType = "";
  }
  if (dataType === "") {
    alertMsg("请选择数据类型!");
    return;
  }
  selectId.value = "";//清空选中ID
  selectData.value = [];
  //查询条件
  let sqlText = "";
  //省市县查询过滤
  let province = queryParams.value.province;
  let city = queryParams.value.city;
  let county = queryParams.value.county;
  // if (province && province !== "") {
  //   if (city && city !== "") {
  //     if (county && county !== "") {
  //       sqlText = "province like '%" + province + "%' and city like '%" + city + "%' and county like '%" + county + "%' and data_version = '" + queryParams.value.versionCode + "'";
  //     } else {
  //       sqlText = "province like '%" + province + "%' and city like '%" + city + "%' and data_version = '" + queryParams.value.versionCode + "'";
  //     }
  //   } else {
  //     sqlText = "province like '%" + province + "%' and data_version = '" + queryParams.value.versionCode + "'";
  //   }
  // }
  sqlText = "data_version = '" + queryParams.value.versionCode + "'"
  //图层查询参数
  layerInfoParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
    code: dataType,
    name: getDataTypeIndex(dataType),
    sqlText: sqlText,
    show: true,
  };
}
//获取数据类型序号
function getDataTypeIndex(type) {
  let code = null;
  let dataTypeArr = dataTypeInfoArray.value;
  for (let i = 0; i < dataTypeArr.length; i++) {
    if (dataTypeArr[i].code == type) {
      code = dataTypeArr[i].name;
      break;
    }
  }

  return code;
}
//设置选择数据ID
const setSelectId = (obj) => {
  if (obj) {
    selectDataList.value = [obj];
    let id = obj.selectListId;
    let dataType = obj.selectType;
    handleDetil(id, dataType);
  }
}
//根据id查询数据
function handleDetil(id, dataType) {
  detailTable.value = false;//关闭表格面板
  nextTick(() => {
    selectListId.value = id;//选中查看详情数据Id
    selectType.value = dataType;//选中查看详情数据类型
    detailTable.value = true;//打开表格面板
  });
}
//地图对象
const map = ref(null);
const getMap = (obj) => {
  map.value = obj;
}
//关闭表格面板
function closeDetailResultDiv() {
  detailTable.value = false;//关闭表格面板
}
const queryDataType = ref("");//查询数据类型
const typeName = ref('')
//查询列表数据
function queryTableClick() {
  typeName.value = '建筑物公里格网'
  //查询数据类型
  queryDataType.value = queryParams.value.dataType;
  let dataType = queryDataType.value;
  if (dataType == null) {
    dataType = "";
  }
  if (dataType === "") {
    alertMsg("请选择数据类型!");
    return;
  }
  if (queryParams.value.versionCode === "") {
    alertMsg("请选择数据版本!");
    return;
  }
  selectListId.value = "";//清空Id
  selectDataList.value = [];
  selectType.value = queryParams.value.dataType;//数据类型
  detailTable.value = true;//打开表格面板
}
//警告消息
function alertMsg(msg) {
  proxy.$modal.msgWarning(msg);
}
// 添加-保存（保存新版本）
function submitForm() {
  proxy.$refs["ruleForm"].validate(valid => {
    if (valid) {
      const fileList = JSON.parse(JSON.stringify(proxy.$refs["attachmentFileRef"].fileList))
      const attachIds = []
      for (var i = 0; i < fileList.length; i++) {
        attachIds.push(fileList[i].attachId)
      }
      form.value.attachmentIds = attachIds.join(",")
      form.value.dataRangeProvince = queryParams1.value.dataRangeProvince
      form.value.dataRangeCity = queryParams1.value.dataRangeCity
      form.value.dataRangeArea = queryParams1.value.dataRangeArea
      const query = { ...form.value }
      uploadAdministrativeArea(query).then(res => {
        open.value = false
        alertMsg('添加成功')
      })
    }
  })
}
function closeVersicode() {
  pageSize.value.dataRangeCountry = ''
  pageSize.value.dataRangeProvince = ''
  pageSize.value.dataRangeCity = ''
  pageSize.value.dataRangeArea = ''
}
// 确认上传数据文件
function uploadFile(value) {
  if (value.list) {
    form.value.tempVersionCode = value.tempVersionCode;
    let arr = [];
    value.list.forEach(item => {
      arr.push(item.attachId)
    })
    form.value.dataFileIds = arr.join(',');
    form.value.fieldNum = value.fieldNum;
    form.value.fieldEntry = value.fieldEntry;
  } else {
    form.value.tempVersionCode = null;
    form.value.dataFileIds = '';
    form.value.fieldNum = '';
    form.value.fieldEntry = '';
  }
}
function dels() {
  form.value.tempVersionCode = null;
  form.value.dataFileIds = '';
  form.value.dataFileId = [];
  form.value.fieldNum = '';
  form.value.fieldEntry = '';
}
const openDoc = ref(false);
const docList = ref([]);
const tabType = ref('')
// 打开字段说明
function handleDoc() {
  getDataDoc().then(res => {
    docList.value = res.data
    tabType.value = docList.value[0].name
    openDoc.value = true;
  }).catch(_ => {
    docList.value = [];
    openDoc.value = false;
  })
}
onMounted(() => {
  getProvinceData();
});
</script>

<style lang="scss" scoped>
//查询面板
.new-queryDiv {
  position: absolute;
  top: 16px;
  left: 100px;
  width: 358px;
  height: 320px;
  background-color: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid #707070;
  border-radius: 4px;
}

.new-queryDiv-inner {
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  bottom: 0px;
}

.new-queryBtnDiv {
  position: absolute;
  /*left: 80px;*/
  left: 0px;
  bottom: 20px;
}
.new-queryTableBtnDiv {
  position: absolute;
  left: 118px;
  bottom: 20px;
}
.new-closeBtnDiv {
  position: absolute;
  /*right: 50px;*/
  right: 0px;
  bottom: 20px;
}
</style>
